<template>
  <div>
    <a-modal :maskClosable="false"
             title="新增菜单路由信息"
             :visible="visible"
             :confirm-loading="confirmLoading"
             @ok="handleOk"
             @cancel="handleCancel"
    >

      <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">

        <!--   菜单与路由密不可分
             菜单可以是路由，
             路由不一定是菜单
             -->
        <a-form-item label="作为菜单展示">
          <a-select
              v-decorator="['isMenu',
               { rules: [{ required: true, message: '请选择是否作为展示菜单!' }] },
              ]"
              allowClear placeholder="选择是否作为展示菜单"
              @change="handleSelectChangeByIsMenu"
          >
            <a-select-option v-for="item in isMenuEnum"
                             :key="item.value"
                             :value="item.value"> {{ item.label }} [{{ item.value }}]
            </a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item label="菜单/路由描述">
          <a-input allowClear placeholder="菜单/路由描述"
                   v-decorator="['note', { rules: [{ required: true, message: '请输入菜单/路由描述!' }] }]"
          />
        </a-form-item>


        <a-form-item v-if="showMenuKey" label="VUE菜单Key">
          <a-input allowClear placeholder="menuKey"
                   v-decorator="['menuKey',
                   { rules: [{ required: true, message: 'Please input VUE菜单Key' }] },

              ]"
          />
        </a-form-item>
        <a-form-item v-if="showComp" label="VUE组件名">
          <a-input allowClear placeholder="UserManage"
                   v-decorator="['routerComponent',
                   { rules: [{ required: true, message: 'Please input 组件名' }] },
              ]"
          />
        </a-form-item>
        <a-form-item v-if="showComp" label="VUE路由名">
          <a-input allowClear placeholder="UserManage"
                   v-decorator="['routerName',
                    { rules: [{ required: true, message: 'Please input 路由名' }] },
              ]"
          />
        </a-form-item>
        <a-form-item v-if="showComp" label="VUE路由地址">
          <a-input allowClear placeholder="/userManage"
                   v-decorator="['routerPath',
                     { rules: [{ required: true, message: 'Please input 路由地址' }] },
              ]"
          />
        </a-form-item>


        <a-form-item v-if="showMenuIcon" label="菜单图标">
          <a-input allowClear placeholder="appstore"
                   v-decorator="['iconType',
              ]"
          />
        </a-form-item>

        <a-form-item v-if="showMenuSeq" label="排序号">
          <a-input allowClear placeholder="31"
                   v-decorator="['menuSequence',
              { rules: [{ required: true, message: '请输入菜单排序号!' }] }
              ]"
          />
        </a-form-item>


        <a-form-item v-if="showMenuLevel" label="菜单级别">
          <a-select
              v-decorator="['menuLevel',
               { rules: [{ required: true, message: '请选择菜单级别!' }] },
              ]"
              allowClear placeholder="选择菜单级别"
              @change="handleSelectChangeByMenuLevel"
          >
            <a-select-option v-for="item in menuLevelEnum"
                             :key="item.value"
                             :value="item.value"> {{ item.label }} [{{ item.value }}]
            </a-select-option>
          </a-select>

        </a-form-item>

        <a-form-item v-if="showHasChild" label="是否有子菜单">
          <a-select
              v-decorator="['hasChild',
               { rules: [{ required: true, message: '是否含有子菜单!' }] },
              ]"
              allowClear placeholder="选择是否含有子菜单"
              @change="handleSelectChangeByHasChild"
          >
            <a-select-option v-for="item in hasChildEnum"
                             :key="item.value"
                             :value="item.value"> {{ item.label }} [{{ item.value }}]
            </a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item v-if="showParentMenuId" label="父级菜单">
          <a-select
              v-decorator="['parentMenuId',
                             { rules: [{ required: true, message: '是否含有父级菜单!' }] },
              ]"
              placeholder="选择父级菜单" allowClear
              @change="handleSelectChange"
          >
            <a-select-option v-for="item in oldMenuEnum"
                             :key="item.menuId"
                             :value="item.menuId"> {{ item.note }} [{{ item.menuId }}]
            </a-select-option>
          </a-select>
        </a-form-item>

        <!--        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">-->
        <!--          <a-button type="primary" html-type="submit">-->
        <!--            Submit-->
        <!--          </a-button>-->
        <!--        </a-form-item>-->

      </a-form>

    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'add-menu',
  data() {
    return {
      showMenuKey: false,
      showComp: false,

      showMenuIcon: true,
      showMenuSeq: true,
      showMenuLevel: true,
      showHasChild: true,
      showParentMenuId: true,


      formLayout: 'horizontal',
      form: this.$form.createForm(this, {name: 'coordinated'}),
      oldMenuEnum: [],
      isMenuEnum: [
        {
          label: '作为菜单展示',
          value: 1
        },
        {
          label: '仅作为路由跳转',
          value: 0
        }
      ],
      hasChildEnum: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],

      menuLevelEnum: [
        {
          label: '一级菜单',
          value: 1
        },
        {
          label: '二级菜单',
          value: 2
        }
      ],

      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  mounted() {

  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    handleSelectChange(value) {
      console.log(value);
      // this.form.setFieldsValue({
      //   note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
      // });
    },


    handleSelectChangeByMenuLevel(val) {
      console.warn(val);
      if (val === 2) {
        this.$nextTick(() => {
          this.showParentMenuId = true;
        });

      } else {
        this.$nextTick(() => {
          this.showParentMenuId = false;
        });

      }


    },

    handleSelectChangeByIsMenu(val) {
      console.warn(val);
      if (val === 0) {
        this.$nextTick(() => {
          this.showComp = true;

          this.showMenuIcon = false;
          this.showMenuSeq = false;
          this.showMenuLevel = false;
          this.showHasChild = false;
          this.showParentMenuId = false;
        });


      } else {
        this.$nextTick(() => {
          this.showComp = false;

          this.showMenuIcon = true;
          this.showMenuSeq = true;
          this.showMenuLevel = true;
          this.showHasChild = true;
          this.showParentMenuId = true;
        });
      }

    },

    handleSelectChangeByHasChild(val) {
      console.log(val);
      if (val === 1) {
        this.$nextTick(() => {
          this.showComp = false;
          this.showMenuKey = true;

          // this.form.validateFields(['nickname'], { force: true });
        });
      } else {
        this.$nextTick(() => {


          this.showComp = true;
          this.showMenuKey = false;
          // this.form.validateFields(['nickname'], { force: true });
        });
      }

    },

    showModal() {
      this.$reqGlobal.get('/lte/menu/enum').then(res => {
        this.form.resetFields();
        this.visible = true;
        console.log(res.data.data);
        this.oldMenuEnum = res.data.data;
      });
    },
    handleOk(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          //开始loading
          this.confirmLoading = true;
          this.$reqGlobal.post('/lte/menu/add',values).then(res=>{
            this.visible = false;
            this.confirmLoading = false;
            this.$emit('refreshTreeTable',true)
          });

          // setTimeout(() => {
          //   this.visible = false;
          //   this.confirmLoading = false;
          // }, 2000);

        } else {
          console.warn('参数校验失败')
        }
      });


    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
};
</script>
